<template>
	<div class="home-container">
		<m-header :hasList="true" :hasCart="true" :isHome="true" :hasCover="true">
		</m-header>
		<div class="main" v-sdcon>
			<div class="drag-here-box" v-show="!componentsLength">
				<div class="drag-here">
					主体内容拖拽到此处
				</div>
			</div>
			<component 
				v-for="(item, index) in getRealComponentsList[0][1]" 
				v-sdrag="{componentName: item.componentName, handleType: 'sort', index}" 
				:is="generatorComName(item.componentName)" 
				:key="index" 
				:config="item" 
				:data-id="item.id" 
				:dataList="dataStore[item.componentName][item.id]" 
				:part="1">
			</component>
			<div class="footer">
				<HomeFooter></HomeFooter>
			</div>
		</div>
	</div>
</template>
<script>
import { mapGetters } from "vuex";
import initData from "../../utils/lxn/handleData";
import { REAL_PREFIX } from "@/config/components/prefix.js";
import CartShowNum from "../../real-components/CartShowNum";
import HomeFooter from "../../real-components/HomeFooter";
import Header from "../../real-containers/header";


export default {
	data() {
		return {
		};
	},
	computed: {
		...mapGetters("gw", ["getRealComponentsList"]),
		...mapGetters("xxy", {dataStore: "getDataStore"}),
		componentsLength() {
			if (this.$store.getters["gw/getRealComponentsList"][0][1].length > 0) {
				return true;
			} else {
				return false;
			}
		}
	},
	async mounted() {
		initData(true);
		await this.inite();
	},
	components: {
		"m-header": Header,
		"v-CartShowNum": CartShowNum,
		HomeFooter
	},
	methods: {
		inite() {
			PSEvent.listen("bannerUpdate", (componentObj) => {
				initData(true, componentObj);
			});
			PSEvent.listen("productItemNewUpdate", (componentObj) => {
				initData(true, componentObj);
			});
			PSEvent.listen("featuredGoodsNew", (componentObj) => {
				initData(true,componentObj);
			});
			PSEvent.listen("newZoneUpdate", (componentObj) => {
				initData(true,componentObj);
			});
			PSEvent.listen("finalListNewUpdate", (componentObj) => {
				initData(true,componentObj);
			});
			PSEvent.listen("OneProUpdate", (componentObj) => {
				initData(true,componentObj);
			});
		},
		removeListen() {
			PSEvent.remove("bannerUpdate");
			PSEvent.remove("productItemNewUpdate");
			PSEvent.remove("featuredGoodsNew");
			PSEvent.remove("newZoneUpdate");
			PSEvent.remove("finalListNewUpdate");
			PSEvent.remove("OneProUpdate");
		},
		generatorComName(baseName) {
			return REAL_PREFIX + baseName;
		},
	},
	beforeDestroy() {
		this.removeListen();
	},
	created() {
		if (!this.$store.getters["cjy/newClassifyData"]) {
			this.$store.dispatch("cjy/queryNewClassifyList");
		}
	}
};
</script>
<style scoped>
.shade-header {
	width: 100%;
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
}
.main {
	flex: 1;
	overflow-y: scroll;
}

.home-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
}
</style>